<template>
    <ul class="slide-list">
        <li v-for="(item, index) in slideList"
            class="slide-item"
            :class="[index === currentIndex ? 'slide-item-active' : '']"
            ga_event="focus_list_click">
            <a :href="item.display_url" target="_blank">
                <img :src="item.image_url" alt="">
                <p class="title">{{item.title}}</p>
            </a>
        </li>
    </ul>
</template>

<style lang="less">
    .slide-list {
        position: relative;
        width: 600px;
        height: 300px;
        overflow: hidden;
        background-image: linear-gradient(to bottom right,rgba(0,0,0,.3),#000);

        .slide-item {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition-property: opacity;
            transition-duration: 800ms;
            z-index: 1;

            &-active {
                opacity: 1;
                z-index: 10;
            }

            img {
                width: 100%;
                height: 100%;
            }

            .title {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 44px;
                line-height: 44px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 22px;
                color: #fff;
                font-size: 20px;
                font-weight: bold;
                background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.80) 100%);
                box-sizing: border-box;
            }
        }
    }
</style>

<script>
  import eventBus from 'byted-toutiao-pc-business-components/src/js/eventBus.js'

  export default {
    name: 'SlideList',
    props: {
      slideList: {
        type: Array,
        default: []
      },
      autoplay: {
        type: Boolean,
        default: false
      },
      autoplaySpeed: {
        type: Number,
        default: 3000
      }
    },
    data () {
      return {
        currentIndex: 0
      }
    },
    mounted () {
      this.setAutoplay()
      eventBus.$on('slide-tab-change', (index) => {
        if (this.currentIndex !== index) {
          this.currentIndex = index
          this.setAutoplay()
        }
      })
    },
    methods: {
      add (offset) {
        let index = this.currentIndex
        index += offset
        while (index < 0) index += this.slideList.length
        index = index % this.slideList.length
        this.currentIndex = index
        eventBus.$emit('slide-list-change', index)
      },
      setAutoplay () {
        window.clearInterval(this.timer)
        if (this.autoplay) {
          this.timer = window.setInterval(() => {
            this.add(1)
          }, this.autoplaySpeed)
        }
      }
    }
  }
</script>



// WEBPACK FOOTER //
// slide-list.vue?5c8c32a8